<template>
<div class="aapp">
  <el-input type="date"></el-input>
  <div>

    nick:<span>{{$store.state.nickname}}</span>
    <h1>vuex的学习</h1>
    frontend：前端
    backend：后端
    <pre>
    登录状态  用户名称  头像  地理位置等可以放在vuex里面
    商品收藏  购物车等
    在单个组件中state就相当于data
    项目部署了之后也需要使用的：--save
    项目部署了之后不需要用的：--save -dev
    store：仓库
      引用的时候：$store.state.xxx
         但是直接这样引用，在其他页面是无法进行修改的
 devtoods:插件，记录每一次state状态的修改
      修改：通过mutations进行修改
        当修改的时候有异步操作时，要在action进行里操作
      this.$store.commit()
    </pre>
  </div>
<div>
  <b>例题：加减法问题</b>
  <p>{{$store.state.countss}}</p>
  <el-button @click="add">+</el-button>
  <el-button @click="deAdd">-</el-button>
</div>
<!-- --------------------------------------- -->
<h1>一、getters</h1>
  <h4>给数据要进行某种变换，在传给别人的时候，可以用getters</h4>
    <b>例题：每次获取countss的平方。</b>
    <p>{{$store.getters.pfCount}}</p>
  <hr>
    <b>例题：获取年龄大于20岁人的信息</b>
    <h3>过滤：Array.filter()</h3>
    <pre>
       <p>{{$store.getters.more20age}}</p>
      <hr>
      <p>获取超过20岁人数组的长度</p>
      <span>{{$store.getters.more20ageLength}}</span>
       <p>获取超过age的人</p>
      <span>{{$store.getters.moreAge(10)}}</span>
    </pre>
  <!-- ----------------------------------------- -->
  <h1>二、motation</h1>
  <b>vuex的store状态的修改一定是通过mutation</b>
    <p>给count加5/+10</p>
    <p>{{$store.state.countss}}</p>
    <el-button @click="addCount(5)">+5</el-button>
    <el-button @click="addCount(10)">+10</el-button>
  <pre>
    <h2>提交风格</h2>
    1.普通的提交方式
      this.$store.commit('xxxx', 参数)；
    2.特殊的提交方式
     this.$store.commit({type：'xxxxx',count: count})；
    当打印这里的count是会发现返回的是一整个{type：'xxxxx',count: count}因此这里的参数count就可以改成payload
    <b>点击+5/+10：</b>
    使用页面：
        addCount(count) {
         this.$store.commit({type：'incrementCount',count})；
        }
    index.js页面中mutations：
        incrementCount(state, payload){
          state.counter += payload.count
        }
    <h2>响应式规则</h2>
vuex中的state是响应式的，当state中的数据发生改变时，vue组件会自动更新
    <b>必须遵守一些vuex对应的规则：</b>
      1.提前在store中初始化所需的属性。
      2.当给state中的对象添加新属性时，使用下面的方式：
        一、使用Vue.set(obj,'newProp',123)
             eg：Vue.set(state.info, 'address', '洛杉矶')
        二、用新对象给旧对象重新赋值。
    state在初始时，state的属性会被加入到响应式系统中，而响应式系统会监听属性的变化。
    当属性发生变化时，会通知所有的界面中用到该属性的地方，让界面发生改变。
    <!--dep->[Watcher]观察者模式-->
      <b>删除某一个属性：delete关键字</b>
          delete.state.info.age这样删除是不能够做到响应式的
        Vue.delete(state.info,'age')
    <h2>类型常量</h2>
    创建文件：moutation-types
          export const NAME：name、
    [xxxx]  'xxxx'
    <h2>同步函数</h2>
    {{$store.state.info}}
    <el-button @click="aupdatInfo">添加信息1</el-button>
    <el-button @click="AupdatInfo">添加信息2</el-button>
  </pre>
  <h1>modules</h1>
    <p>{{$store.state.a.name}}</p>
  <h1>对象的解构</h1>
  obj = {name: 'aaa' ,age: 17, sex: 'nv'}
  const {name,age} = obj
  console.log(name);------>aaa
  console.log(age); ------>17
</div>
</template>

<script>
export default {
  //...mapState(['nickname']),
  name: "myText",
  data() {
    return {

    }
  },
  methods: {
    add() {
      this.$store.commit('countAdd')//调用vuex里的countAdd方法
    },
    deAdd() {
      this.$store.commit('countDe')
    },
    addCount(count) {
      this.$store.commit('increatCount',count)
    },
    aupdatInfo() {
      //this.$store.dispatch('aupdateInfo');
      this.$store.dispatch('aupdateInfo', {
        message: '我是信息1哦',
        success: () => {
          console.log('我是success()函数');
        }
      });
    },
    AupdatInfo() {
      //this.$store.dispatch('aupdateInfo');
      this.$store.dispatch('AupdateInfo', {
        message: '我是信息2哦',
        success: () => {
          console.log('2,我是success()函数');
        }
      }).then(res => {
        console.log('完成');
        console.log(res)
      });
    }
  }
}
</script>

<style scoped>
.aapp{
  font-size: 16px;
}
h1{
  color: green;
}
b{
  color: red;
}
</style>